import React from 'react';
import * as PropTypes from 'prop-types';
import styles from './style/index.less';
import Iconfont from 'components/Iconfont';

class Basic extends React.Component {
  static defaultProps = {
    dataSource: {},
    columns: [],
  }

  render() {
    const { columns, className, dataSource } = this.props;
    return (
      <div className={`${styles.Basic} clearfix`}>
      {
        columns.map((ele,index) =>{
          const { unit, icon, field, label } = ele;
          return (
          <div key={index} className={`${styles.items} ${styles[className]}`}>
            {icon ? <div className={styles.icon}><Iconfont type={icon} /></div>: null}
            <div className={styles.num}>{dataSource[field] || dataSource[field] === 0 ? dataSource[field] : '--'}</div>
            <div className={styles.text}>{label} ({unit})</div>
          </div>)
        })
      }
    </div>
    );
  }
}

Basic.propTypes = {
  cloumn: PropTypes.object,
  colorful: PropTypes.bool,
  icon: PropTypes.string,
}

export default Basic;